{% load static %}
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>编辑个人信息 - 旅游推荐系统</title>
    <!-- 引入 Bootstrap 5 -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <!-- 引入 Font Awesome -->
    <link rel="stylesheet" href="{% static 'plugins/font-awesome-4.7.0/css/font-awesome.css' %}">
    <!-- 引入自定义CSS -->
    <link rel="stylesheet" href="{% static 'css/user/edit_profile.css' %}">
</head>
<body>
<!-- 导航条 (与首页一致) -->
<nav class="navbar navbar-expand-lg navbar-dark navbar-custom sticky-top">
    <!-- 导航条内容与首页相同 -->
</nav>

<!-- 主内容区 -->
<div class="profile-edit-container">
    <div class="container">
        <div class="row justify-content-center">
            <div class="col-lg-8">
                <div class="profile-edit-card">
                    <div class="card-header">
                        <h2><i class="fa fa-user-edit"></i> 编辑个人信息</h2>
                    </div>
                    <div class="card-body">
                        <form id="profileForm" method="post" enctype="multipart/form-data">
                            {% csrf_token %}

                            <!-- 基本信息部分 -->
                            <div class="section-header">
                                <h3>基本信息</h3>
                            </div>

                            <div class="row mb-4">
                                <!-- 头像上传 -->
                                <div class="col-md-4 mb-3">
                                    <div class="avatar-upload">
                                        <div class="avatar-preview">
                                            <img src="{{ MEDIA_URL }}img/users/{{ user.id }}/avatar/avatar.jpg?v={{ user.avatar_timestamp }}"
                                                 class="user-avatar-img"
                                                 alt="头像预览">
                                        </div>
                                        <div class="avatar-upload-controls">
                                            <input type="file" id="avatarInput" name="avatar" accept="image/*"
                                                   class="d-none">
                                            <button type="button" class="btn btn-sm btn-outline-primary"
                                                    onclick="document.getElementById('avatarInput').click()">
                                                <i class="fa fa-camera"></i> 更换头像
                                            </button>
                                        </div>
                                    </div>
                                </div>

                                <!-- 用户名和昵称 -->
                                <div class="col-md-8">
                                    <div class="mb-3">
                                        <label for="username" class="form-label">用户名</label>
                                        <input type="text" class="form-control" id="username"
                                               value="{{ user.username }}" readonly>
                                    </div>
                                    <div class="mb-3">
                                        <label for="nickname" class="form-label">昵称</label>
                                        <input type="text" class="form-control" id="nickname" name="nickname"
                                               value="{{ user.nickname|default:'' }}">
                                    </div>
                                </div>
                            </div>

                            <!-- 个人资料部分 -->
                            <div class="section-header">
                                <h3>个人资料</h3>
                            </div>

                            <div class="row">
                                <div class="col-md-6 mb-3">
                                    <label for="gender" class="form-label">性别</label>
                                    <select class="form-select" id="gender" name="gender">
                                        <option value="U" {% if user.gender == 'U' %}selected{% endif %}>未知</option>
                                        <option value="M" {% if user.gender == 'M' %}selected{% endif %}>男</option>
                                        <option value="F" {% if user.gender == 'F' %}selected{% endif %}>女</option>
                                        <option value="O" {% if user.gender == 'O' %}selected{% endif %}>其他</option>
                                    </select>
                                </div>
                                <div class="col-md-6 mb-3">
                                    <label for="birth_date" class="form-label">出生日期</label>
                                    <input type="date" class="form-control" id="birth_date" name="birth_date"
                                           value="{{ user.birth_date|date:'Y-m-d'|default:'' }}">
                                </div>
                            </div>

                            <!-- 地区选择部分 -->
                            <div class="row">
                                <div class="col-md-4 mb-3">
                                    <label for="province" class="form-label">省份</label>
                                    <select class="form-select" id="province" name="province">
                                        <option value="">请选择省份</option>
                                        <!-- 省份选项将通过JavaScript动态加载 -->
                                    </select>
                                </div>
                                <div class="col-md-4 mb-3">
                                    <label for="city" class="form-label">城市</label>
                                    <select class="form-select" id="city" name="city" disabled>
                                        <option value="">请先选择省份</option>
                                    </select>
                                </div>
                                <div class="col-md-4 mb-3">
                                    <label for="district" class="form-label">区县</label>
                                    <select class="form-select" id="district" name="district" disabled>
                                        <option value="">请先选择城市</option>
                                    </select>
                                </div>
                            </div>

                            <!-- 兴趣标签部分 -->
                            <div class="section-header">
                                <h3>兴趣标签</h3>
                                <small class="text-muted">选择您感兴趣的旅游类型（可多选）</small>
                            </div>

                            <div class="interests-container mb-4">
                                {% for interest in interest_choices %}
                                    <div class="form-check form-check-inline">
                                        <input class="form-check-input" type="checkbox" id="interest_{{ interest.0 }}"
                                               name="interests" value="{{ interest.0 }}"
                                               {% if interest.0 in user_interests %}checked{% endif %}>
                                        <label class="form-check-label"
                                               for="interest_{{ interest.0 }}">{{ interest.1 }}</label>
                                    </div>
                                {% endfor %}
                            </div>

                            <!-- 旅游偏好部分 -->
                            <div class="section-header">
                                <h3>旅游偏好</h3>
                            </div>

                            <div class="row">
                                <div class="col-md-6 mb-3">
                                    <label for="travel_frequency" class="form-label">年旅游次数</label>
                                    <select class="form-select" id="travel_frequency" name="travel_frequency">
                                        <option value="0" {% if user.travel_frequency == 0 %}selected{% endif %}>0次
                                        </option>
                                        <option value="1" {% if user.travel_frequency == 1 %}selected{% endif %}>1-2次
                                        </option>
                                        <option value="3" {% if user.travel_frequency == 3 %}selected{% endif %}>3-5次
                                        </option>
                                        <option value="6" {% if user.travel_frequency == 6 %}selected{% endif %}>
                                            6次以上
                                        </option>
                                    </select>
                                </div>
                                <div class="col-md-6 mb-3">
                                    <label for="budget_preference" class="form-label">消费偏好</label>
                                    <select class="form-select" id="budget_preference" name="budget_preference">
                                        <option value="low" {% if user.budget_preference == 'low' %}selected{% endif %}>
                                            经济型
                                        </option>
                                        <option value="medium"
                                                {% if user.budget_preference == 'medium' %}selected{% endif %}>舒适型
                                        </option>
                                        <option value="high"
                                                {% if user.budget_preference == 'high' %}selected{% endif %}>豪华型
                                        </option>
                                    </select>
                                </div>
                            </div>

                            <!-- 联系方式部分 -->
                            <div class="section-header">
                                <h3>联系方式</h3>
                            </div>

                            <div class="mb-3">
                                <label for="email" class="form-label">电子邮箱</label>
                                <input type="email" class="form-control" id="email" name="email"
                                       value="{{ user.email|default:'' }}">
                            </div>
                            <div class="mb-3">
                                <label for="wechat_id" class="form-label">微信ID</label>
                                <input type="text" class="form-control" id="wechat_id" name="wechat_id"
                                       value="{{ user.wechat_id|default:'' }}">
                            </div>

                            <!-- 个人简介 -->
                            <div class="section-header">
                                <h3>个人简介</h3>
                            </div>

                            <div class="mb-3">
                                <label for="bio" class="form-label">自我介绍</label>
                                <textarea class="form-control" id="bio" name="bio" rows="3"
                                          maxlength="500">{{ user.bio|default:'' }}</textarea>
                                <div class="form-text">不超过500字</div>
                            </div>

                            <!-- 表单操作按钮 -->
                            <div class="form-actions mt-4">
                                <button type="submit" class="btn btn-primary">
                                    <i class="fa fa-save"></i> 保存更改
                                </button>
                                <a href="/homepage/" class="btn btn-outline-secondary">
                                    <i class="fa fa-times"></i> 取消
                                </a>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- 引入 Bootstrap JS -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
<!-- 引入省份城市数据 -->
<script src="{% static 'js/china_regions.js' %}"></script>
<!-- 引入自定义JS -->
<script src="{% static 'js/user/edit_profile.js' %}"></script>
</body>
</html>